<template>
  <div class='header'>
    <div class='header-content'>
        <h1>
            TodoList
        </h1>
        <input
            data-test='input'
            class='todolist-input'
            type="text"
            v-model='inputValue'
            @keyup.enter='addTodoItem'
            placeholder='TodoItem'
        />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      inputValue: ''
    }
  },
  methods: {
    addTodoItem () {
      if (this.inputValue) {
        this.$emit('add', this.inputValue)
        this.inputValue = ''
      }
    }
  }
}
</script>

<style scoped lang="stylus">
    .header
        line-height 60px
        background-color greenyellow
        color white
    .header-content
        display flex
        justify-content space-between
        align-items center
        width 800px
        margin 0 auto
    .todolist-input
        text-indent 10px
        height 26px
        width 300px
        border none
        &:focus
            outline 1px solid pink
</style>
